<template>
  <u-popup :show="show" mode="center"  :closeOnClickOverlay="false" bgColor="transparent">
   <view class="reload-history-modal-wrapper">
      <view
        class="main-wrapper"
        :style="{'background-image':`url(${bg})`,'paddingTop':divStyle.pdTop}"
      >
        <view class="con"
          :style="{'color':divStyle.content}"
        >
          <view>已经坚持到这里了，马上就要完成咯~</view>
          <view>真的要放弃吗？</view>
        </view>
        <view class="btn-group">
          <view class="btn-box retest-btn" 
          :style="{'background':divStyle.leftBtnBg}"
          @click="closeHandle">
            回到测评大厅
          </view>
          <view class="btn-box report-btn"
           :style="{'background':divStyle.rightBtn}"
           @click="confirmHandle">
            继续答题
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default{
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      type:{
        type:String,
        default:''
      }
    },
    data(){
      return {
        show:false,
        staticImgs:{
          bgD: this.imgBaseURL + '/scl/modal-bg-1.png',
          bgMbti: this.imgBaseURL + '/scl/modal-bg-1-mbti.png',
          bgSpm:this.imgBaseURL + '/scl/modal-bg-1-spm.png',
          bgXgMbti:this.imgBaseURL + '/scl/modal-bg-1-xg-mbti.png',
          bgCryl:this.imgBaseURL + '/scl/modal-bg-1-cryl.png',
        },
      }
    },
    computed:{
      bg(){
        if(this.type == 'mbti'){
          return this.staticImgs.bgMbti
        }else if(this.type == 'spm'){
          return this.staticImgs.bgSpm
        }else if(this.type == 'xg-mbti'){
          return this.staticImgs.bgXgMbti
        }else if(this.type == 'love-cryl'){
          return this.staticImgs.bgCryl
        }else{
          return this.staticImgs.bgD
        }
      },
      divStyle(){
        if(this.type == 'mbti'){
          return {
            content:'#063214',
            leftBtnBg:'linear-gradient( 180deg, #C2CFFF 0%, #6882FF 100%)',
            rightBtn:'linear-gradient( 180deg, #8DA8FF 0%, #495CFF 100%)',
            pdTop:'364rpx',
          }
        }else if(this.type == 'spm'){
          return {
            content:'#063214',
            leftBtnBg:'linear-gradient( 180deg, #BFCDFF 0%, #6D99ED 100%)',
            rightBtn:'linear-gradient( 180deg, #A2B8FF 0%, #3877EC 100%)',
            pdTop:'346rpx',
          }
        }else if(this.type == 'xg-mbti'){
          return {
            content:'rgba(51, 51, 51, 1)',
            leftBtnBg:'linear-gradient( 180deg, #FFD7B1 0%, #FE8F6D 100%)',
            rightBtn:'linear-gradient( 180deg, #FFCE9E 0%, #FF7246 100%)',
            pdTop:'346rpx',
          }
        }else if(this.type == 'love-cryl'){
          return {
            content:'rgba(6, 50, 20, 1)',
            leftBtnBg:'linear-gradient( 180deg, #FFD5ED 0%, #FF95D7 100%)',
            rightBtn:'linear-gradient( 180deg, #FFC4E3 0%, #FF68C6 100%)',
            pdTop:'346rpx',
          }
        }else{
          return {
            content:'#063214',
            leftBtnBg:'linear-gradient( 180deg, #FFD580 0%, #DB9B38 100%)',
            rightBtn:'linear-gradient( 180deg, #73D48F 0%, #5ABB40 100%)',
            pdTop:'364rpx',
          }
        }
      }
    },
    watch:{
      visible:{
        handler(val){
          console.log(val,'===================== reloadHistoryVisible')
          this.show = val
        },
        immediate:true
      },
    },
    methods:{
      confirmHandle(){
        this.show = false
        this.$emit('confirm')
      },
      closeHandle(){
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reload-history-modal-wrapper{
    margin-bottom: 200rpx;
    .main-wrapper{
      background-repeat: no-repeat;
      background-size: contain;
      
      width: 540rpx;
      height: 604rpx;
      box-sizing: border-box;
      padding-top: 364rpx;
      
      .con{
        display: flex;
        flex-direction: column;
        
        padding: 0 32rpx;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #063214;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
        
        // margin-top: 24rpx;
        margin-bottom: 34rpx;
      }
      .btn-group{
        display: flex;
        justify-content: center;
        column-gap: 22rpx;
        
        .btn-box{
          width: 230rpx;
          height: 70rpx;
          
          border-radius: 35rpx;
          line-height: 70rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #FFFFFF;
          // line-height: 42rpx;
          text-align: center;
          font-style: normal;
          
        }
        
        .retest-btn{
          
          
          background: linear-gradient( 180deg, #FFD580 0%, #DB9B38 100%);
          
        }
        .report-btn{
          background: linear-gradient( 180deg, #73D48F 0%, #5ABB40 100%);
        }
        
        
      }
    }
    
  }             
</style>